<script lang="ts" setup>
  import { reactive, ref } from 'vue'
  import { useDark, useToggle } from '@vueuse/core'
  const isDark = useDark()
</script>

<template>
  <div>
    <!-- vant组件暗黑模式 -->
    <span style="font-size: 12px; margin-right: 8px;vertical-align: 7px;">{{ isDark ? '暗黑' : '白昼' }}</span>
    <van-switch v-model="isDark" size="20" active-color="#3b3b3b">
      <template #node>
        <div class="icon-wrapper">
          <van-icon class="iconfont" class-prefix="icon" :name="isDark ? 'moon' : 'sun'" />
        </div>
      </template>
    </van-switch>
    <!-- 切换暗黑模式的按钮
    <label for="toggleDark" style="font-size: 12px; vertical-align: middle">
      {{ isDark ? '暗黑' : '白昼' }}
    </label> -->
    <!-- <input
      style="vertical-align: middle"
      class="toggleCheckbox"
      type="checkbox"
      v-model="isDark"
      name="toggleDark"
      id="toggleDark" /> -->
  </div>

  <div>
    <p>图片区</p>
    <img src="@/assets/edgeicon.png" alt="" />
  </div>

  <div>
    <p>文字区</p>
    <div class="context"> 暗黑模式好有趣啊 </div>
  </div>
</template>

<style scoped>
  .toggleCheckbox {
    outline: none;
    width: 32px;
    height: 16px;
    background-color: #ffffff;
    border: solid 1px #ccc;
    border-radius: 5px;
    margin-left: 6px;
    padding: 0;
    cursor: pointer;
    appearance: none;
    user-select: none;
  }
  .toggleCheckbox:checked {
    background: url('../assets/edgeicon.png') no-repeat;
  }

  /* switch样式 */
  .icon-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    font-size: 10px;
  }

  .icon-wrapper .van-icon-success {
    color: var(--van-blue);
  }

  .icon-wrapper .van-icon-cross {
    color: var(--van-gray-5);
  }
</style>
